<template>
	<view>
			<view class="view-top">
				<view class="search">
					<view @tap="search"  class="iconfont sotext">&#xe620;输入关键词搜索...</view>
				</view>
				<view @tap="jilu" class="iconfont jiconfont">&#xe7eb;</view>
				
				<!--影视导航-->
				<scroll-view :scroll-x="true" class="scroll-view" style="margin-top:30rpx;padding: 0 10rpx;">
					<view class="tab_top">
						<view class="row" v-if="item.type_id<36" v-for="(item,index) in vodtab" @tap="tabtap(item,index)">
							<view style="margin-top: -6rpx;font-size: 40rpx;font-weight: 700;padding: 1rpx 15rpx;" class="colorarea fonts"
								:class="vodtitle == item.type_name ? 'show' : ''">{{item.type_name}}</view>
						</view>
					</view>
				</scroll-view>
				<!--导航-->


				<!--筛选导航-->
				<view>
					<view>
						<scroll-view v-if="class_type==1" :scroll-x="true" class="scroll-view-area"
							style="margin-top:80rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype">类型:</text>
								<view class="row" v-for="(item,index) in dy_classlist" @tap="vod_class(item,index)">
									<text class="colorarea"
										:class="vodclass == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
						<scroll-view  v-if="class_type==1" :scroll-x="true" class="scroll-view-area"
							style="margin-top:25rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype">地区:</text>
								<view class="row " v-for="(item,index) in arealist" @tap="vod_area(item,index)">
									<text class="colorarea" :class="vodarea == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
						<scroll-view  v-if="class_type==2" :scroll-x="true" class="scroll-view-area"
							style="margin-top:25rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype">地区:</text>
								<view class="row " v-for="(item,index) in arealist" @tap="voddsj_class(item,index)">
									<text class="colorarea" :class="voddsj == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
						<scroll-view  v-if="class_type==3 || class_type==4 || class_type==5" :scroll-x="true" class="scroll-view-area"
							style="margin-top:45rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype" style="font-size:30rpx">地区:</text>
								<view class="row " v-for="(item,index) in arealist" @tap="voddsj_class(item,index)">
									<text class="colorarea" style="font-size:30rpx" :class="voddsj == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
						
						<scroll-view v-if="class_type==2" :scroll-x="true" class="scroll-view-area"
							style="margin-top:80rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype">类型:</text>
								<view class="row " v-for="(item,index) in dsjclass" @tap="voddsj_type(item,index)">
									<text class="colorarea"
										:class="dsjclassshow == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
						<scroll-view  v-if="class_type==1 || class_type==2" :scroll-x="true" class="scroll-view-area"
							style="margin-top:130rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype">年代:</text>
								<view class="row " v-for="(item,index) in yearlist" @tap="vod_year(item,index)">
									<text class="colorarea" :class="vodyear == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
						<scroll-view v-if="class_type==3 || class_type==4 || class_type==5" :scroll-x="true" class="scroll-view-area"
							style="margin-top:110rpx;padding: 0 10rpx;">
							<view class="tab_top">
								<text class="colortype" style="font-size:30rpx">年代:</text>
								<view class="row " v-for="(item,index) in yearlist" @tap="vod_year(item,index)">
									<text class="colorarea" style="font-size:30rpx" :class="vodyear == item ? 'showtype' : ''">{{item}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!--电影筛选导航-->
			</view>

			<view class="listtop">
				<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="300">
					<swiper-item v-for="item in lunbo" class="swiper-item" @tap="play(item,1)">
						<image :src="upload+item.vod_pic" mode="aspectFill"></image>
						<text class="live">{{item.vod_name}}</text>
					</swiper-item>
				</swiper>
			</view>
			<view style="margin: 20rpx;">
				<text @tap="play(item,1)" class="vodclass" v-for="item in lists" :key="item.id">{{item.vod_name}}</text>
			</view>

			<view style="margin-top:40rpx;">
				<view class="listv row">
					<view class="list" v-for="(item,index) in list" :key="item.id" @tap="play(item,1)">
						<image :src="upload+item.vod_pic" mode="aspectFill"></image>
						<view style="margin: 10rpx;">
							<text class="vodname font">{{item.vod_name}}</text>
							<view style="margin-top: 20rpx;"></view>
						</view>
						<view style="margin-top: 5rpx;">
							<text class="yanyuan">{{item.vod_actor==''?'暂无演员信息':item.vod_actor}}</text>
						</view>
						<view style="height: 10rpx;"></view>
						<!--<view style="margin-top: 5rpx;">
					<text class="hot">热度:{{item.vod_up}}</text>
					<text class="times">item.vod_blurb</text>
					</view>-->
					</view>
				</view>
			</view>
			<null class="null" v-if="!load && list.length == 0" info="暂无相关数据!"></null>
			<load class="load" :style="{opacity:load ? '1' : '0'}"></load>
		
		<!--电影结束-->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				class_type: 1,
				vodtab: [],
				arealist: [],
				yearlist: [],
				dsjclass: [],
				dy_classlist: [],
				dsj_classlist: [],
				lunbo: [],
				lists: [],
				newinidex: 0,
				classbg: {},
				load: true,
				list: [],
				dsjlist: [],
				type: '',
				typshaixuan: '',
				vodtitle: '',
				tabbar: 0,
				vodclass: '',
				vodarea: '',
				vodyear:'',
				voddsj:'',
				dsjclassshow:'',
				token:'',
				upload: getApp().upload
			}
		},
		computed: {
			
		},
		onLoad() {
			uni.getStorage({
				key:'userinfo',
				success: (e) => {
					console.log(e.data.token)
					let sign = this.md5(e.data.token);
					this.GetJson(this.ip + 'userinfo.php','POST',{
						token:e.data.token,
						sign:sign
					},res=>{
						if(res.code == 405 || res.userinfo == null || res.userinfo == ''){
							uni.removeStorage({key:'ulogin'})
							uni.reLaunch({url:'../login/login'})
						}else{
							this.$store.state.userinfo = res.userinfo;
					   }
					})
				}  
			})
			
			 this.newinidex = 0;
			 
			this.GetJson(this.ip + 'setapp.php', 'GET', {}, e => {
				//console.log(e)
				this.vodtab = e.vodtab;
				this.dy_classlist = e.dy_classlist;
				this.dsj_classlist = e.dsj_classlist;
				this.arealist = e.arealist;
				this.yearlist = e.yearlist;
				this.dsjclass=e.dsjclass;
				this.vtitle = e.vtitle;
			})
			uni.getStorage({
				key: 'maindata',
				success: (e) => {
					this.lunbo = e.data.lunbo;
					this.$nextTick(function() {
						plus.navigator.closeSplashscreen();
					})
				}
			})
			this.GetJson(this.ip + 'vtag.php', 'POST', {}, e => {
				this.lists = e.lists;
			})
			this.getlunbo();
			
			//APP更新
			//#ifdef APP-PLUS
			uni.$on('getgengxin',es=>{
				if(es === true)this.showload();
				//console.log(es)
				this.GetJson(this.ip + 'appup.php','GET',{},e=>{
					if(es === true)this.hideload();
					if(e.data.edition != plus.runtime.version){//有新版本
						
						  if(e.data.ios!='' && uni.getSystemInfoSync().platform == 'ios'){
							uni.setStorageSync('upapp',e.data)
							uni.navigateTo({
								url:'../gengxin/gengxin' 
							})
							uni.$once('upapp',(is)=>{
								if(uni.getSystemInfoSync().platform == 'ios'){
									if(e.data.ios!=null || e.data.ios !=''){
										plus.runtime.openURL(e.data.ios);
									}
								}else{
									this.down(e.data.android);
									this.showToast('已进入后台下载...');
								}
							}) 
							}
							if(e.data.android!='' && uni.getSystemInfoSync().platform != 'ios'){
								uni.setStorageSync('upapp',e.data)
								uni.navigateTo({
									url:'../gengxin/gengxin'
								})
								uni.$once('upapp',(is)=>{
									if(uni.getSystemInfoSync().platform == 'ios'){
										if(e.data.ios!=null || e.data.ios !=''){
											plus.runtime.openURL(e.data.ios);
										}
									}else{
										this.down(e.data.android);
										this.showToast('已进入后台下载...');
									}
								})
							}
						
					}else if(es === true){
						this.showToast('当前版本已是最新版本');
					}
					
				})
			})
			//WGT更新
			plus.runtime.getProperty( plus.runtime.appid, (wgtInfo) => {
				this.appVersion= wgtInfo.version 
			})
			this.GetJson(this.ip + 'appup.php','GET',{},e=>{
				if(e.data.wgtedition != this.appVersion){//有新版本
				   if(uni.getSystemInfoSync().platform == 'ios'){
					   if(e.data.wgtios!='' || e.data.wgtios!=null){
						   let wgt = e.data.wgtios;
						   this.downwgt(wgt);
					   }
					}else{
						if(e.data.wgtandroid!='' || e.data.wgtandroid!=null){
							let wgt = e.data.wgtandroid;
							this.downwgt(wgt);
						}
					}
				}
			})
			//wgt更新结束
			//#endif
			this.getdata()
		},
		onReady() {
			let name = {
				'type_id': '1',
				'type_name': '电影'
			};
			this.$set(this, 'vodtitle', '电影')
			this.tabtap(name,this.newindex);
			uni.$emit('getgengxin',false);
		},
		onUnload() {

		},
		methods: {
			tabtap(item, index) {
				if (item.type_name == '电影') {
					this.class_type = 1;
				} else if (item.type_name == '电视剧') {
					this.class_type = 2;
				} else if (item.type_name == '综艺') {
					this.class_type = 3;
				} else if (item.type_name == '动漫') {
					this.class_type = 4;
				} else if (item.type_name == '动画片') {
					this.class_type = 5;
				} else {
 
				}
				this.area = '全部';
				this.pid = item.type_id;
				this.vodtypename = '全部';
				this.vodtypeyear = '全部';
				this.$set(this, 'vodarea', '全部')
				this.$set(this, 'vodclass', '全部')
				this.$set(this, 'vodyear', '全部')
				this.$set(this, 'voddsj', '全部')
				this.$set(this, 'dsjclassshow', '全部')
				this.$set(this, 'vodtitle', item.type_name)
				this.getdata(true);
				//console.log('分类名称:' + item.type_name + 'class:' + this.class_type + '年代：'+this.vodtypeyear)
				//console.log('id:' + item.type_id + 'num:' + index)
			},

			vod_area(item, index) {
				this.$set(this, 'vodarea', item)
				this.area = item;
				this.getdata(true);
			},
			vod_class(item, index) {
				this.$set(this, 'vodclass', item)
				this.vodtypename = item;
				this.getdata(true);
			},
			vod_year(item, index) {
				this.$set(this, 'vodyear', item)
				this.vodtypeyear = item;
				this.getdata(true);
			},
			voddsj_class(item, index) {
				this.$set(this, 'voddsj', item)
				this.area = item;
				this.getdata(true);
			},
			voddsj_type(item, index) {
				this.$set(this, 'dsjclassshow', item)
				this.vodtypename = item;
				this.getdata(true);
			},
			getdata(is) {
				console.log('1314');
				//console.log('id:' + this.pid + ',' + '地区：' + this.area + ',' + '电影分类：' + this.vodtypename+ '年代：'+this.vodtypeyear)
				if (is === true) this.list = [];
				this.load = true;
				this.GetJson(this.ip + 'vlist.php', 'POST', {
					num: this.list.length,
					pid: this.pid,
					area: this.area,
					vodclass: this.vodtypename,
					vodyear:this.vodtypeyear,
				}, e => {
					//console.log(e.list)
					this.load = false;
					uni.stopPullDownRefresh();
					if (this.isdata(e)) {
						this.list = [...this.list, ...e.list];
					}
				})
			},
			getdatas(is) {
				this.load = true;
				this.GetJson(this.ip + 'indexlist.php', 'POST', {}, e => {
					this.lunbo = e.lunbo;
					this.load = false;
					uni.stopPullDownRefresh();
					uni.setStorage({
						key: 'maindata',
						data: e
					})
				})
			},
            getlunbo(){
				this.GetJson(this.ip + 'vlunbo.php', 'POST', {}, e => {
					uni.stopPullDownRefresh();
					this.lunbo = e.lists;
				})
			},
			search() {
				uni.navigateTo({
					url: '../sou/sou?type=2',
					animationType: 'fade-in'
				})
			},
			jilu() {
				uni.navigateTo({
					url: '../wode/record/record',
					animationType: 'fade-in'
				})
			},
			play(item, type) {
				uni.navigateTo({
					url: '../play/vplay?id=' + item.vod_id
				})
			},
			down(url){
				if(url.indexOf('http') !== -1){
					const downloadTask = uni.downloadFile({url:url,success: (res) => {
						plus.runtime.install(res.tempFilePath,{force:true});
					   }
					})
				    downloadTask.onProgressUpdate((e) => {
						this.downnum = e.progress;
						uni.$emit('sendNum', {
						    data:e.progress
						});
					})
					
				}
			},
			downwgt(path){
				if(path.indexOf('http') !== -1){
				      uni.downloadFile({url:path,success: (res) => {
			          plus.runtime.install(res.tempFilePath,{force:true}, function(widgetInfo) {
				      plus.runtime.restart();
			        }, function(e) {
				  });
			    }
			  })
			}
			},
		},
		onReachBottom() {
			if (this.load == false) this.getdata('is')
		},

		onPullDownRefresh() {
			this.getdata(true);
			this.getlunbo();
		}
	}
</script>

<style>
	page {
		background-color: #181b2e;
	}
    .view-top{
		background: linear-gradient(45deg,#181b2e,#181b2e,#181b2e);
		width: 100%;
		/*#ifdef H5 */
		height: 350rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		height: 400rpx;
		/*#endif*/
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
	}
	.sotext{
		margin-top:15rpx;
		margin-left: 15rpx;
		color: #4f5684;
		font-size: 30rpx;
	}
	.jiconfont{
		/*#ifdef H5 */
		margin-top:25rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		margin-top:91rpx;
		/*#endif*/
		margin-left: 670rpx;
		color: #4f5684;
		font-size:60rpx
	}
	.fonta {
		background-image: linear-gradient(to right, #521fad, #7b42e0, #521fad);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fontb {
		background-image: linear-gradient(to right, #7b42e0, #7b42e0);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fonts {
	    background-image: linear-gradient(to right, #FE6191,#FB6794, #F98DAD);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	}

	.fontc {
		background-image: linear-gradient(to right, #6b45aa, #7649c0, #6b45aa);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.font {
	    background-image: linear-gradient(to right, #f93bd7, #FE82E3, #FC5A8B);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	}

	.tab_top {
		display: flex;
		color: #FFF;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 60rpx;
	}

	.colorarea {
		margin-left: 15rpx;
		border-radius: 15rpx 15rpx 0 0;
		color: #4C5482;
		font-size: 27rpx;
	}
	.colortype {
		color: rgba(146,92,254, 0.7);
		font-size: 27rpx;
		font-weight: 600;
		margin-left: 15rpx;
		border-radius: 15rpx 15rpx 0 0;
	}

	.show {
		margin-left: 15rpx;
		margin: 10rpx;
		color: rgba(250, 90, 154, 1);
		font-size: 27rpx;
		font-weight: 600;
		border-bottom: 10rpx solid rgba(250, 90, 154, 1);
		transition: .5s;
	}
    .showtype {
		margin-left: 15rpx;
		margin: 10rpx;
		color: rgba(146,92,254, 0.7);
		font-size: 27rpx;
		font-weight: 600;
		border-bottom: 10rpx solid rgba(146,92,254, 0.7);
		transition: .5s;
	}
	.live {
		display: inline-block;
		text-align: center;
		width: 750rpx;
		height: 80rpx;
		font-size: 35rpx;
		font-weight: 700;
		line-height: 70rpx;
		font-size: 18px;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: 275rpx;
		left: 0rpx;
		z-index: 99;
	}

	.vodclass {
		background: #212640;
		margin-top: 15rpx;
		border-radius: 5rpx;
		padding: 10rpx 25rpx;
		color: #666666;
		font-size: 23rpx;
		display: inline-block;
		margin-right: 15rpx;
	}

	.topbg {
		background: linear-gradient(45deg, #7f25b1, #5c34ac, #303086);
		height: 500rpx;
		width: 750rpx;
		border-radius: 0rpx 0rpx 50rpx 50rpx;
	}

	.search {
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 10rpx;
		margin: 20rpx;
		height: 70rpx;
		width: 620rpx;
		/*#ifdef H5 */
		margin-top: 20rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		margin-top: 90rpx;
		/*#endif*/
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.scroll-view {
		width: 750rpx;
		white-space: nowrap;
		height: 65rpx;
		position: fixed;
		/*#ifdef H5 */
		top: 80rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		top: 140rpx;
		/*#endif*/
		left: 0;
		z-index: 1;
	}

	.swiper {
		margin: 20rpx;
		border-radius: 9rpx;
		height: 350rpx;
		width: 95%;
	}

	.swiper-item>image {
		border-radius: 9rpx;
		width: 100%;
		height: 350rpx;
	}

	.tabg {
		width: 100rpx;
		height: 5rpx;
		text-align: center;
		margin-left: -15rpx;
		background-color: #FA5A9A;
		position: absolute;
		bottom: 0rpx;
		transition: left .5s;
	}

	.scroll-view-area {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15rpx;
		width: 750rpx;
		white-space: nowrap;
		height: 50rpx;
		position: fixed;
		/*#ifdef H5 */
		top: 150rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		top: 200rpx;
		/*#endif*/
		left: 0;
		z-index: 9999;
	}
	.scroll-views {
		width: 750rpx;
		white-space: nowrap;
		height: 40rpx;
		position: fixed;
		top: 265rpx;
		left: 0;
		background-color: #feb4cd;
		z-index: 1;
	}

	.swiper_item {
		height: 50rpx;
		width: 90%;
		font-size: 26rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: white
	}

	.tagv {
		display: flex;
		margin-top: 15rpx;
	}

	.tagv>text {
		font-size: 35rpx;
		color: #808080;
		border: 1rpx solid rgba(234, 234, 234, 0.3);
		background-color: rgba(234, 234, 234, 0.3);
		padding: 5rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}

	.load {
		opacity: 0;
		transition: opacity .3s;
	}
    .listtop{
		/*#ifdef H5 */
		margin-top:350rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		margin-top:400rpx;
		/*#endif*/
	}
	.listv {
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20rpx;
	}

	.list {
		border-radius: 5rpx;
		box-shadow: 10rpx 10rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
		background-color: #212640;
		width: 230rpx;
		margin-bottom: 20rpx;
		animation: opacitys .1s;
	}

	.list>image {
		width: 230rpx;
		height: 300rpx;
		border-radius: 8rpx 8rpx 0 0;
		box-shadow: 2px 6px 6px rgba(0, 0, 0, .3);
		background-color: #2b3151;
	}

	.list>view>image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100px;
		margin-right: 10rpx;
		background-color: #2b3151;
	}

	.vodname {
		color: #000000;
		font-weight: 500;
		font-size: 28rpx;
		display: block;
		margin-top: 10rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		opacity: .7;
	}

	.yanyuan {
		margin: 10rpx;
		color: #495189;
		font-weight: 400;
		font-size: 26rpx;
		display: block;
		margin-top: -15rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		opacity: .7;
	}

	.hot {
		margin: 20rpx;
		font-size: 25rpx;
		line-height: 70rpx;
		background-color: #fdc8e1;
		padding: 3rpx 8rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
	}

	.times {
		margin: 5rpx;
		float: right;
		font-size: 28rpx;
		color: pink;
		line-height: 70rpx;
	}

	.null {
		position: absolute;
		top: 70%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
	}
</style>